<script setup>
import {ref, onMounted } from 'vue'
import Edit from './components/Edit.vue'
import axios  from 'axios'

// TODO: 列表渲染
//1：定义集合变量接受API返回的数据;
const list=ref([])

//2：使用axios发送请求，获取数据
const sendQueryApi=async ()=>{
  axios.get('/list')
  .then(res=>{
    list.value=res.data
    console.log("list集合数据内容为：",list.value)
  })
  .catch(err=>{
    console.log("发送请求失败，具体信息为：",err)
  })
}




//3：使用onMounted生命周期函数，组件加载完成后发送请求
// 发送请求
onMounted(()=>{
  sendQueryApi()
})



// TODO: 删除功能

// 定义删除函数--> 点击删除按钮携带数据对应的唯一id值--> 发送请求删除对应的数据-->重调查询接口回显删除后的数据内容
const deleteByIdDate= async (id)=>{

  console.log("删除对应的id值为：",id)
  axios.delete(`/del/${id}`)
  .then(res=>{
    console.log("删除成功，具体信息为：",res)
    // 重新发送请求
    sendQueryApi()


    
  }).catch(err=>{
    console.log("删除失败，具体信息为：",err)
  })
}

// TODO: 编辑功能
// 打开编辑弹框--> 回填对应的数据-->点击按钮触发编辑操作--> 发送请求修改数据-->关闭编辑弹框-->重调查询接口回显修改后的数据内容

// 1：定义弹框开关变量，从父组件进行控制子组件
const editRef=ref(null) //获取子组件实例对象

const onEdit=(row)=>{

  // 通过子组件实例对象调用子组件定义的open函数
  editRef.value.open(row)
}

</script>

<template>
  <div class="app">
    <el-table :data="list">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name" width="150"></el-table-column>
      <el-table-column label="籍贯" prop="place"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{row}">
          <el-button type="primary" @click="onEdit(row)">编辑</el-button>
          <el-button type="danger" @click="deleteByIdDate(row.id)" link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <Edit ref="editRef" @on-update="sendQueryApi"/>
</template>

<style scoped>
.app {
  width: 980px;
  margin: 100px auto 0;
}
</style>
